<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input type="text" class="search-input" v-model="searchWords" placeholder="搜索表情包" @confirm="searchEmojis" />
			<button class="search-btn" @click="searchEmojis">搜索</button>
		</view>
		
		<!-- 表情包列表 -->
		<view class="emoji-container" v-if="emojiList.length > 0">
			<view class="emoji-grid">
				<view class="emoji-item" v-for="(item, index) in emojiList" :key="index" @click="previewImage(item)">
					<image :src="item" mode="aspectFill" class="emoji-image"></image>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="loading">
				<text>加载中...</text>
			</view>
			<view class="load-more" v-else-if="page >= maxpage && page > 1">
				<text>没有更多了</text>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else-if="!loading">
			<text>暂无表情包</text>
		</view>
		
		<!-- 初始加载 -->
		<view class="loading-state" v-else>
			<text>正在加载...</text>
		</view>
	</view>
</template>

<script>
		export default {
		data() {
		return {
			baseUrl: '', // 最优接口地址
			apiUrl: '', // 完整API地址
			emojiList: [], // 表情包列表
			page: 1, // 当前页码
			maxpage: 1, // 最大页码
			limit: 15, // 每页数量
			searchWords: '可爱', // 搜索关键词
			loading: false, // 加载状态
			currentImage: '', // 当前预览的图片
			// API集群配置
			apiEndpoints: [
				'http://101.35.2.25',
				'http://124.222.204.22',
				'http://81.68.149.132',
				'https://cn.apihz.cn'
			],
			preferredEndpoint: null, // 上次成功的API，优先使用
			// 开发者信息
			developerId: '10008731',
			developerKey: '885de13c6686a82e83f43792b4f82f51'
		}
		},
		onLoad() {
			// 从本地存储获取上次成功的API
			this.preferredEndpoint = uni.getStorageSync('preferredApiEndpoint') || null;
			
			// 开始集群请求获取表情包
			this.getEmojiListWithCluster();
		},
		onReachBottom() {
			// 下拉加载更多
		if (!this.loading && this.page < this.maxpage) {
			this.loading = true;
			this.page++;
			// 直接使用当前成功的API加载更多，不需要重新集群请求
			this.getEmojiList([], -1);
		}
		},
		methods: {
			// 使用集群请求方式获取表情包
		getEmojiListWithCluster() {
			// 准备API列表，优先使用上次成功的API
			let endpoints = [...this.apiEndpoints];
			if (this.preferredEndpoint && endpoints.includes(this.preferredEndpoint)) {
				// 将上次成功的API移到列表最前面
				endpoints = endpoints.filter(e => e !== this.preferredEndpoint);
				endpoints.unshift(this.preferredEndpoint);
			}
			
			// 递归请求函数
			this.tryNextEndpoint(endpoints, 0);
		},
		
		// 尝试下一个API端点
		tryNextEndpoint(endpoints, index) {
			// 如果所有API都尝试失败
			if (index >= endpoints.length) {
				this.loading = false;
				uni.hideLoading();
				uni.showToast({
					title: '所有API都请求失败，请稍后重试',
					icon: 'none'
				});
				console.error('所有API端点请求失败');
				return;
			}
			
			const currentEndpoint = endpoints[index];
			this.baseUrl = currentEndpoint;
			this.apiUrl = currentEndpoint + '/api/img/apihzbqbbaidu.php';
			
			console.log(`尝试API ${index + 1}/${endpoints.length}: ${currentEndpoint}`);
			
			// 使用当前API尝试获取表情包
			this.getEmojiList(endpoints, index);
		},
			
			// 获取表情包列表
		getEmojiList(endpoints, index) {
			if (!this.apiUrl) {
				// 如果API URL无效，尝试下一个
				this.tryNextEndpoint(endpoints, index + 1);
				return;
			}
			
			const params = {
				id: this.developerId,
				key: this.developerKey,
				page: this.page,
				limit: this.limit
			};
			
			// 如果有搜索关键词，添加到参数中
			if (this.searchWords) {
				params.words = this.searchWords;
			}
			
			// 如果是第一次请求才显示loading
			if (this.page === 1 && index === 0) {
				uni.showLoading({
					title: "加载中"
				});
			}
			
			uni.request({
				url: this.apiUrl,
				method: 'GET',
				data: params,
				timeout: 10000, // 设置超时时间为10秒
				success: (res) => {
					console.log("API响应", res);
					
					if (res.statusCode === 200 && res.data && res.data.code === 200) {
						// 记录成功的API端点
						this.preferredEndpoint = this.baseUrl;
						uni.setStorageSync('preferredApiEndpoint', this.baseUrl);
						
						// 如果是第一页，直接替换列表；否则追加
						if (this.page === 1) {
							this.emojiList = res.data.res || [];
						} else {
							this.emojiList = [...this.emojiList, ...(res.data.res || [])];
						}
						this.maxpage = res.data.maxpage || 1;
						
						uni.hideLoading();
					} else {
						console.error(`API ${this.baseUrl} 解析失败，尝试下一个`, res);
						// 当前API返回错误，尝试下一个
						this.tryNextEndpoint(endpoints, index + 1);
					}
				},
				fail: (err) => {
					console.error(`API ${this.baseUrl} 请求失败，尝试下一个`, err);
					// 请求失败，尝试下一个API
					this.tryNextEndpoint(endpoints, index + 1);
				},
				complete: () => {
					this.loading = false;
				}
			});
			},
			
			// 搜索表情包
		searchEmojis() {
			this.page = 1;
			this.loading = true;
			this.getEmojiListWithCluster();
		},
			
			// 预览图片
			previewImage(imageUrl) {
				this.currentImage = imageUrl;
				// 使用uni-app自带的图片预览功能
				uni.previewImage({
					urls: [imageUrl],
					current: 0,
					showmenu: true, // 显示菜单，包括保存选项
					success: () => {
						// 预览成功后询问是否保存
						// this.showSaveConfirm();
					}
				});
			},
			
			// 显示保存确认对话框
			showSaveConfirm() {
				uni.showModal({
					title: '保存图片',
					content: '是否保存到相册？',
					confirmText: '保存',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.saveImage();
						}
					}
				});
			},
			
			// 保存图片到本地
			saveImage() {
				if (!this.currentImage) {
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				// 下载图片
				uni.downloadFile({
					url: this.currentImage,
					success: (res) => {
						if (res.statusCode === 200) {
							// 保存图片到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
									this.$refs.savePopup.close();
								},
								fail: (err) => {
									uni.hideLoading();
									console.error('保存失败:', err);
									uni.showToast({
										title: '保存失败，请重试',
										icon: 'none'
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('下载失败:', err);
						uni.showToast({
							title: '下载失败，请重试',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.search-bar {
		display: flex;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	
	.search-input {
		flex: 1;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 40rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
	}
	
	.search-btn {
		margin-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 40rpx;
		padding: 0 40rpx;
	}
	
	.emoji-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.emoji-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}
	
	.emoji-item {
		background-color: #f5f5f5;
		border-radius: 8rpx;
		overflow: hidden;
		aspect-ratio: 1;
	}
	
	.emoji-image {
		width: 100%;
		height: 100%;
	}
	
	.load-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 32rpx;
	}
	
	.loading-state {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 32rpx;
	}
	

</style>